<template>
	<keep-alive>
		<div class="page-home" v-show="carouselList.length !== 0">
			<Carousel :data="carouselList" height="18rem" time="6000"></Carousel>
			<mu-appbar :z-depth="3" style="width: 100%;  position: relative; z-index: 100;" title="理财产品推荐" textColor="#fff" color="#00bcd4"></mu-appbar>
			<Product :data="productList"></Product>
			<NewsItem :data="newsList"></NewsItem>
			<UserItem :data="userList"></UserItem>
			<div class="footer-space"></div>
			<bottomNav></bottomNav>
		</div>
	</keep-alive>
</template>
<script>
// 引入轮播图组件
import Carousel from "@/components/Carousel";
// 引入产品组件
import Product from "@/components/Product";
// 引入新闻列表组件
import NewsItem from "@/components/NewsItem";
// 引入用户列表组件
import UserItem from "@/components/UserItem";
// 引入底部导航组件
import BottomNav from "@c/BottomNav";
// 暴露接口
export default {
	// 注册组件
	components: { Carousel, Product, NewsItem, UserItem, BottomNav },
	// 数据
	data() {
		// 返回数据对象
		return {
			// 轮播图数据
			carouselList: [],
			// 用户列表数据
			userList: [],
			// 新闻列表数据
			newsList: [],
			// 产品数据
			productList: []
		};
  	},
	/* 生命周期方法 */
	// 组件创建完成
	created() {
		// 获取数据
		this.getData();
	},
	// 组件显示
	activated() {
		this.$route.meta.isShow = true;
		console.log(this.$route.meta.isShow);
	},
	// 组件隐藏
	deactivated() {
		this.$route.meta.isShow = false;
		console.log(this.$route.meta.isShow);
	},
	// 方法
	methods: {
		// 定义首页获取数据的方法
		getData() {
			// 显示加载动画并保存至句柄变量
			const loading = this.$loading();
			// 统一处理请求
			Promise.all([
				/* 数据请求 */
				// 轮播图
				this.$http({
					method: "GET",
					url: "/api/banner/list"
				}),
				// 产品列表
				this.$http({
					method: "POST",
					url: "/api/product/list"
				}),
				// 新闻列表
				this.$http({
					method: "GET",
					url: "/api/news/list"
				}),
				// 预约用户列表
				this.$http({
					method: "POST",
					url: "/api/product/bookList"
				})
			])
			// 状态监听
			.finally(() => 
				// 关闭动画
				loading && loading.close()
			)
			// 数据监听
			.then(res => 
				// 数组遍历
				res.forEach(({ data: { code, msg, data } }, index) => {
					/* 数据处理 */
					switch (index) {
						// 轮播图
						case 0:
							code ? console.log(msg) : (this.carouselList = data);
							break;
						// 产品列表
						case 1:
							code ? console.log(msg) : (this.productList = data);
							break;
						// 新闻列表
						case 2:
							code ? console.log(msg) : (this.newsList = data);
							break;
						// 预约用户列表
						case 3:
							code ? console.log(msg) : (this.userList = data);
							break;
						}
				})
			)
			// 错误监听
			.catch(err => console.log(err));
		}
	}
};
</script>

<style lang="scss">
.page-home {
	.footer-space {
		height: 60px;
		width: 100%;
	}
	max-width: 540px;
	margin: 0 auto;
}
</style>